import React from 'react';
import { Modal, Table, Badge } from 'antd';
import { formatDate } from '@/utils/utils';
import { ColumnType } from 'antd/es/table';

const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onlineData,
    loading,
    current,
    total,
    pageChange,
    afterClose,
  } = props;
  const renderTable = () => {
    const columns: ColumnType<any>[] = [
      {
        title: '编号',
        dataIndex: 'a',
        width: 80,
        render: (text, record, index) => (
          <span>{(current - 1) * 10 + index + 1}</span>
        ),
      },
      {
        title: '设备编号',
        dataIndex: 'deviceNo',
      },
      {
        title: '链接 ip',
        dataIndex: 'ip',
      },
      {
        title: '当前线程',
        dataIndex: 'threadId',
      },
      {
        title: '状态',
        dataIndex: 'online',
        render: text => (
          <Badge
            status={text ? 'success' : 'error'}
            text={text ? '在线' : '离线'}
          />
        ),
      },
      {
        title: '时间',
        dataIndex: 'gmtTime',
        render: text => <span>{formatDate(text, 'YYYY-MM-DD HH:mm:ss')}</span>,
      },
    ];

    return (
      <Table
        loading={loading}
        dataSource={onlineData}
        columns={columns}
        rowKey={'id'}
        pagination={{
          showQuickJumper: true,
          showSizeChanger: false,
          pageSize: 10,
          total: total,
          current: current,
          onChange: (page, pageSize) => {
            pageChange(page);
          },
        }}
      />
    );
  };
  return (
    <Modal
      afterClose={afterClose}
      width={850}
      title={'离在线记录'}
      visible={visible}
      onCancel={onCancel}
      footer={null}
    >
      {renderTable()}
    </Modal>
  );
};
export default Detail;
